<template>
	<el-dialog :title="title" v-model="open" append-to-body :close-on-click-modal="false" width="600px">
		<el-form :model="queryParams" ref="queryFormRef" :inline="true" v-show="showSearch">
			<el-form-item label="父订单" prop="pay_sn">
				<el-input v-model="queryParams.pay_sn" placeholder="父订单" clearable />
			</el-form-item>
			<el-form-item>
				<el-button type="primary" icon="el-icon-search" @click="onQuery">搜索</el-button>
				<el-button icon="el-icon-refresh" @click="onResetQuery">重置</el-button>
			</el-form-item>
		</el-form>
		<el-row :gutter="10" class="top-block mb8">
			<el-col :span="20">
				<el-form :model="integralForm" :inline="true">
					<el-form-item label="当前积分" prop="integral">
						<el-input v-model="integralForm.integral" disabled />
					</el-form-item>
				</el-form>
			</el-col>
			<right-toolbar v-model:showSearch="showSearch" @queryTable="getList" />
		</el-row>
		<el-tabs type="border-card" @tab-click="onSwitchTab" v-model="queryParams.type">
			<el-tab-pane label="消费记录" name="0" />
			<el-tab-pane label="退回记录" name="1" />
		</el-tabs>
		<el-table :data="tableList" v-loading="loading">
			<el-table-column label="父订单编号" align="center" prop="pay_sn" />
			<el-table-column label="消费积分" align="center" prop="points" />
			<el-table-column label="下单时间" align="center">
				<template #default="scope">{{ timeDictionary(scope.row.create_time) }}</template>
			</el-table-column>
		</el-table>
	</el-dialog>
</template>

<script lang="ts">
import { computed, reactive, ref, toRefs } from 'vue';
import { bankUsersIntegralConsumption, bankUsersIntegralReturn, bankUsersSelectIntegral, usersIntegralConsumption, usersIntegralReturn, usersSelectIntegral } from '/@/api/admin';
import { timeDictionary } from '/@/utils/dictionaryTranslation';
import { useStore } from '/@/store';

export default {
	name: 'IntegralRecordDialog',
	setup() {
		const state = reactive({
			showSearch: true,
			title: '积分记录',
			open: false,
			queryParams: {
				pay_sn: '',
				type: '0',
				pageNum: 1,
				pageSize: 10,
				user_id: '',
			},
			integralForm: {
				integral: '',
			},
			tableList: [],
			loading: false,
			total: 0,
		});
		const store: any = useStore();

		const queryFormRef = ref(null);

		// 获取用户信息 vuex
		const getUserInfos = computed(() => {
			return store.state.userInfos.userInfos;
		});
		
		/********** 点击事件(on开头) **********/
		// 搜索
		const onQuery = () => {
			state.queryParams.pageNum = 1;
			getList();
		};
		// 重置
		const onResetQuery = () => {
			(queryFormRef.value as any)?.resetFields();
			onQuery();
		};
		//切换tabs
		const onSwitchTab = () => {
			getList();
		};

		/********** 方法事件 **********/
		// 打开
		const openDialog = (config: any) => {
			console.log(config);
			state.open = true;
			state.title = `「${config.nickname}」积分记录`;
			state.queryParams = {
				pay_sn: '',
				type: '0',
				pageNum: 1,
				pageSize: 10,
				user_id: config.id,
			};
			getUserInfos.value.is_bank ? _bankUsersSelectIntegral({ user_id: config.id }) : _usersSelectIntegral({ user_id: config.id });
			getList();
		};
		const getList = () => {
			state.loading = true;
			if  (getUserInfos.value.is_bank) {
				Number(state.queryParams.type) ? _bankUsersIntegralReturn(state.queryParams) : _bankUsersIntegralConsumption(state.queryParams);
				return
			}
			Number(state.queryParams.type) ? _usersIntegralReturn(state.queryParams) : _usersIntegralConsumption(state.queryParams);
		};

		/********** 网络请求 **********/
		// 查询当前用户积分
		const _usersSelectIntegral = (_data: any) => {
			usersSelectIntegral(_data).then((res: any) => {
				state.integralForm.integral = res.data.info.integral;
			});
		};
		// 用户积分消费记录
		const _usersIntegralConsumption = (_data: any) => {
			usersIntegralConsumption(_data)
				.then((res: any) => {
					state.loading = false;
					state.tableList = res.data.list;
					state.total = res.data.total;
				})
				.catch(() => (state.loading = true));
		};
		// 用户积分退回记录表
		const _usersIntegralReturn = (_data: any) => {
			usersIntegralReturn(_data)
				.then((res: any) => {
					state.loading = false;
					state.tableList = res.data.list;
					state.total = res.data.total;
				})
				.catch(() => (state.loading = true));
		};
		// 查询当前用户积分
		const _bankUsersSelectIntegral = (_data: any) => {
			bankUsersSelectIntegral(_data).then((res: any) => {
				state.integralForm.integral = res.data.info.integral;
			});
		};
		// 用户积分消费记录
		const _bankUsersIntegralConsumption = (_data: any) => {
			bankUsersIntegralConsumption(_data)
				.then((res: any) => {
					state.loading = false;
					state.tableList = res.data.list;
					state.total = res.data.total;
				})
				.catch(() => (state.loading = true));
		};
		// 用户积分退回记录表
		const _bankUsersIntegralReturn = (_data: any) => {
			bankUsersIntegralReturn(_data)
				.then((res: any) => {
					state.loading = false;
					state.tableList = res.data.list;
					state.total = res.data.total;
				})
				.catch(() => (state.loading = true));
		};

		return {
			queryFormRef,
			getList,
			onSwitchTab,
			onQuery,
			onResetQuery,
			openDialog,
			timeDictionary,
			...toRefs(state),
		};
	},
};
</script>
